<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
	</head>

	<body>
		<div id="app">
			<input type="button" value="获取vue中的元素" @click="getElement" />
			<!--ref:设置要获取的元素-->
			<h3 ref="myElement">这是一个vue中的元素</h3>

			<hr />
			<input type="button" value="获取子组件中的信息" @click="getSon" />
			<login ref="myson"></login>
		</div>
	</body>
	<script>
		//定义一个子组件
		var login = {
			data() {
				return {
					msg: "子组件中的值"
				}
			},
			methods: {
				show() {
					console.log("子组件中的show方法被调用");
				}

			},
			template: "<h3>这是子组件页面显示内容</h3>"
		}

		var vue = new Vue({
			el: "#app",
			data: {

			},
			methods: {
				getElement() {
					/**
					 * $refs ：用于保存用ref关联的元素，子组件
					 */
					console.log(this.$refs.myElement.innerText);
				},
				getSon() {					
					console.log(this.$refs.myson.msg);
					this.$refs.myson.show();
				}
			},
			components: {
				login
			}
		});
	</script>

</html>